import {
  GroupModuleType,
  ModuleClass,
  ModuleData,
  ModuleType,
  StoreModuleData,
} from '../TypeConstraints';
import StyleForm from './StyleForm';
import ViewComponent from './ViewComponent';

const BaseLongWidth = 25 * 3;
// const BaseShortWidth = 25 * 3

// 容器基础信息
const info = {
  name: ModuleType.Container,
  nameZn: '容器',
  groupType: GroupModuleType.Container,
} as const;

export const initProps: IProps = {
  zIndex: 0,
  left: 5,
  top: 5,
  width: BaseLongWidth,
  height: BaseLongWidth,
  lineColor: '#fff',
  lineWidth: 1,
  lineType: 'solid',
  fillColor: '',
  backgroundImage: '',
  children: [],
};

interface IProps {
  zIndex: number;
  left: number;
  top: number;
  width: number;
  height: number;
  lineColor: string;
  lineWidth: number;
  lineType: string;
  fillColor: string;
  backgroundImage: string;
  children?: Array<StoreModuleData>;
}

// module data
export type IModuleData = ModuleData<ModuleType.Container, IProps>;

const ContainerModuleClass: ModuleClass<ModuleType.Container, IProps> = {
  info,
  initProps: { ...initProps },
  propsKeys: Object.keys(initProps) as Array<keyof IProps>,
  viewComponent: ViewComponent,
  styleFormComponent: StyleForm,
  resizeAxis: 'both',
};

export default ContainerModuleClass;
